<template>
  <div class="dropdown"
       :class="open ? 'open' : ''">
    <button class="btn btn-default"
            @click="toggleDropdown">
      <span class="glyphicon glyphicon-filter"></span>
    </button>
    <ul class="dropdown-menu">
      <li v-for="(item, index) in columns"
          :key="index"
          v-if="item.mode!=='detail'">
        <a href="#"
           class="cool-drop-item"
           @click.prevent="toggleCheck(index)">
          <span class="cool-check"
                :class="item.checked ? 'checked' : ''"></span>
          <span>{{ item.label }}</span>
        </a>
      </li>
      <li role="separator"
          class="divider"></li>
      <li>
        <div class="cool-down-operate clearfix">
          <span class="btn-link pull-left"
                @click="selectAll">All</span>
          <span class="btn-link pull-left"
                @click="clearAll">Clear</span>
          <span class="btn-link pull-right"
                @click="okFilter">OK</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'drop-filter',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    doFilter: {
      type: Function,
      default: function () { }
    }
  },
  data () {
    return {
      open: false,
      checked: []
    }
  },
  created () {
    this.columns.forEach((item) => {
      this.$set(item, 'checked', false)
    })
  },
  methods: {
    toggleCheck (index) {
      if (this.columns[index].checked) {
        this.columns[index].checked = false
        this.checked = this.checked.filter((item) => {
          return index !== item
        })
      } else {
        this.columns[index].checked = true
        this.checked.push(index)
      }
      // this.$emit('doFilter', this.checked)
    },
    toggleDropdown () {
      this.open = !this.open
    },
    selectAll () {
      this.checked = []
      this.columns.forEach((item, i) => {
        this.$set(item, 'checked', true)
        this.checked.push(i++)
      })
    },
    clearAll () {
      this.columns.forEach((item) => {
        this.$set(item, 'checked', false)
      })
      this.checked = []
    },
    okFilter () {
      this.open = false
      this.$emit('doFilter', this.checked)
    }
  }
}
</script>
<style lang="less" scoped>
.pull-right {
  float: right !important;
}
.dropup,
.dropdown {
  position: absolute;
  display: inline-block;
  left: 0;
  top: -34px;
  z-index: 99;
}
.open > .dropdown-menu {
  display: block;
}
.btn {
  display: inline-block;
  padding: 4px ;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-filter{
  background: url('../assets/filter.png') no-repeat;
  width: 20px;
  height: 20px;
  background-position: center
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.cool-drop-item {
  padding: 3px 8px;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.cool-check {
  margin: 3px 12px 3px 6px;
  border: 1px solid #aaaaaa;
  width: 14px;
  height: 14px;
  display: inline-block;
  float: left;
  &.checked {
    background-color: #449d44;
    border-color: #4cae4c;
  }
}
.cool-down-operate {
  padding: 3px 12px;
  span {
    padding: 0 6px;
    cursor: pointer;
  }
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: ' ';
  clear: both;
}
</style>
